<template lang="pug">
  div#Index
    div.top-header
      i.iconfont.icon-sousuo(@click="$router.push('/search')")
      span.top-header-title 主页
      i.iconfont.icon-tianjia
    div.banner
      swiper(:options="swiperOption" ,ref="mySwiper")
        swiper-slide(v-for="(item,index) in banners", :key="index")
          img(:src="item.bannerImg")
        div.swiper-pagination(slot="pagination")
    div.class-navigation
      div.class-title 分类导航
      div.class-list
        div.class-block.top-left-nav(@click="$router.push('/recommendation')")
          span.class-nav-title 推荐
        div.class-block.top-right-nav(@click="$router.push('/status')")
          span.class-nav-title 动态
        div.class-block.bottom-left-nav(@click="$router.push('/challenge')")
          span.class-nav-title 挑战
        div.class-block.bottom-right-nav(@click="$router.push('/recruit')")
          span.class-nav-title 招聘
    div.column-block
      template(v-for="(columnItem,index) in columnData")
        div.column
          img(:src="columnItem.columnImg")
          div.title-bar
            span.title  {{columnItem.columnText}}
            span.share-block
              i.iconfont.icon-fenxiang
            span.like-block(:class="[columnItem.ifLike ? 'highLight' : '']",@click="showLike(index)")
              i.iconfont(:class="[columnItem.ifLike ? 'icon-xihuan-tianchong' : 'icon-xihuan']")
              span.like-number {{columnItem.likeNumber}}

    actionBar(:navIndex = 'navIndex')

</template>
<script>
  import {swiper, swiperSlide} from 'vue-awesome-swiper'
  import actionBar from '@/components/actionBar.vue'

  export default {
    data() {
      const self = this
      return {
        navIndex: 1,
        swiperOption: {
          autoplay: true,
          notNextTick: true,
          pagination: '.swiper-pagination',
          slidesPerView: 'auto',
          centeredSlides: true,
          paginationClickable: true,
          spaceBetween: 30,
          onSlideChangeEnd: swiper => {
            this.page = swiper.realIndex + 1
            this.index = swiper.realIndex
          },
          on: {
            click: function () {
              const url = self.banners[this.activeIndex].url
              self.$router.push(url)
            }
          }
        },
        banners: [{
          bannerImg: require('@/assets/banner01.png'),
          url: '/recruit'
        }, {
          bannerImg: require('@/assets/banner02.png'),
          url: '/challenge'
        }],
        columnData: [{
          columnImg: require('@/assets/index/column01.png'),
          columnText: '发现身边的美',
          likeNumber: 20,
          ifLike: true
        }, {
          columnImg: require('@/assets/index/column01.png'),
          columnText: '发现身边的美',
          likeNumber: 20,
          ifLike: false
        }]
      }
    },
    methods: {
      showLike(index) {
        if (!this.columnData[index].ifLike) {
          this.columnData[index].ifLike = true
          this.columnData[index].likeNumber += 1
        }
      }
    },
    components: {
      swiper,
      swiperSlide,
      actionBar
    }
  }
</script>
<style scoped lang="less">
  #Index {
    .top-header {
      .icon-sousuo {
        float: left;
      }
      .icon-tianjia {
        float: right;
      }
    }
    .banner {
      margin-bottom: 5px;
      img {
        display: block;
        height: 200px;
        width: 100%;
      }
    }
    .class-navigation {
      background: #fff;
      padding: 0 20px;
      overflow: hidden;
      margin-bottom: 5px;
      .class-title {
        height: 40px;
        line-height: 40px;
        text-align: left;
      }
      .class-list{
        margin-bottom: 30px;
        overflow: hidden;
        .class-block {
          height: 80px;
          width: calc(50% - 2.5px);
          position: relative;
          margin-top: 7px;
          .class-nav-title {
            position: absolute;
            color: #fff;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
          }
        }
      }
      .top-left-nav {
        float: left;
        background: url("../assets/index/left-nav.png") center;
        background-size: cover;
      }
      .top-right-nav {
        float: right;
        background: url("../assets/index/right-nav.png") center;
        background-size: cover;
      }
      .bottom-left-nav {
        float: left;
        background: url("../assets/index/left-nav.png") center;
        background-size: cover;
      }
      .bottom-right-nav {
        float: right;
        background: url("../assets/index/right-nav.png") center;
        background-size: cover;
      }
    }
    .column-block {
      background: #fff;
      margin-bottom: 58px;
    }

    .iconfont {
      font-size: 16px;
    }
  }

</style>
